<!DOCTYPE html>
<html lang="zh-CN">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>争议处理系统 - 工作台</title>
  <!-- 引入Tailwind CSS -->
  <script src="https://cdn.tailwindcss.com"></script>
  <!-- 引入Font Awesome -->
  <link href="https://cdn.jsdelivr.net/npm/font-awesome@4.7.0/css/font-awesome.min.css" rel="stylesheet">
  <!-- 引入Chart.js -->
  <script src="https://cdn.jsdelivr.net/npm/chart.js@4.4.8/dist/chart.umd.min.js"></script>
  
  <!-- 配置Tailwind主题 -->
  <script>
    tailwind.config = {
      theme: {
        extend: {
          colors: {
            primary: '#0F52BA',
            secondary: '#3B82F6',
            success: '#10B981',
            warning: '#F59E0B',
            danger: '#EF4444',
            info: '#60A5FA',
            neutral: '#6B7280',
            'neutral-light': '#F3F4F6',
            'neutral-medium': '#D1D5DB'
          },
          fontFamily: {
            inter: ['Inter', 'system-ui', 'sans-serif'],
          },
        },
      }
    }
  </script>
  
  <!-- 自定义工具类 -->
  <style type="text/tailwindcss">
    @layer utilities {
      .content-auto {
        content-visibility: auto;
      }
      .scrollbar-thin {
        scrollbar-width: thin;
      }
      .scrollbar-thin::-webkit-scrollbar {
        width: 4px;
        height: 4px;
      }
      .scrollbar-thin::-webkit-scrollbar-thumb {
        background-color: rgba(156, 163, 175, 0.5);
        border-radius: 2px;
      }
      .transition-bg {
        transition: background-color 0.2s ease-in-out;
      }
      .card-hover {
        @apply hover:shadow-lg transition-all duration-300 hover:-translate-y-1;
      }
      .progress-bar {
        @apply h-2 rounded-full bg-neutral-light overflow-hidden;
      }
      .progress-value {
        @apply h-full transition-all duration-500 ease-out;
      }
    }
  </style>
</head>
<body class="font-inter bg-gray-50 text-gray-800 min-h-screen flex flex-col">
  <!-- 顶部导航栏 -->
  <header class="bg-white shadow-sm z-30">
    <div class="container mx-auto px-4">
      <div class="flex items-center justify-between h-16">
        <!-- 左侧Logo和标题 -->
        <div class="flex items-center space-x-4">
          <div class="flex items-center justify-center w-10 h-10 rounded-lg bg-primary text-white">
            <i class="fa fa-balance-scale text-xl"></i>
          </div>
          <div>
            <h1 class="text-xl font-bold text-primary">争议处理系统</h1>
            <p class="text-xs text-neutral hidden md:block">公正 · 高效 · 透明</p>
          </div>
        </div>
        
        <!-- 右侧用户信息和操作 -->
        <div class="flex items-center space-x-6">
          <button class="relative p-2 text-neutral hover:text-primary transition-colors">
            <i class="fa fa-bell-o text-lg"></i>
            <span class="absolute top-1 right-1 w-2 h-2 bg-danger rounded-full"></span>
          </button>
          <button class="p-2 text-neutral hover:text-primary transition-colors">
            <i class="fa fa-question-circle-o text-lg"></i>
          </button>
          <div class="flex items-center space-x-3 cursor-pointer group">
            <img src="https://picsum.photos/id/1005/40/40" alt="处理员头像" class="w-8 h-8 rounded-full object-cover border-2 border-transparent group-hover:border-primary transition-all">
            <div class="hidden md:block">
              <p class="text-sm font-medium">张明 处理员</p>
              <p class="text-xs text-neutral">在线</p>
            </div>
            <i class="fa fa-angle-down text-neutral group-hover:text-primary transition-colors"></i>
          </div>
        </div>
      </div>
    </div>
  </header>

  <!-- 主内容区 -->
  <main class="flex-1 flex overflow-hidden">
    <!-- 左侧导航 -->
    <aside class="w-64 bg-white border-r border-neutral-medium/30 flex flex-col h-full transition-all duration-300 z-20">
      <nav class="flex-1 overflow-y-auto scrollbar-thin py-4">
        <div class="px-4 mb-2">
          <p class="text-xs font-semibold text-neutral uppercase tracking-wider">主菜单</p>
        </div>
        <ul>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 bg-primary/10 text-primary font-medium">
              <i class="fa fa-home w-5 text-center"></i>
              <span>工作台</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-gavel w-5 text-center"></i>
              <span>争议案件</span>
              <span class="ml-auto bg-primary text-white text-xs px-2 py-0.5 rounded-full">12</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-sitemap w-5 text-center"></i>
              <span>处理流程</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-folder-open-o w-5 text-center"></i>
              <span>证据管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-file-text-o w-5 text-center"></i>
              <span>处理结果</span>
            </a>
          </li>
        </ul>
        
        <div class="px-4 mt-6 mb-2">
          <p class="text-xs font-semibold text-neutral uppercase tracking-wider">系统管理</p>
        </div>
        <ul>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-users w-5 text-center"></i>
              <span>用户管理</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-cog w-5 text-center"></i>
              <span>系统设置</span>
            </a>
          </li>
          <li>
            <a href="#" class="flex items-center space-x-3 px-4 py-3 text-neutral hover:bg-primary/5 hover:text-primary transition-bg">
              <i class="fa fa-bar-chart w-5 text-center"></i>
              <span>统计报表</span>
            </a>
          </li>
        </ul>
      </nav>
      
      <!-- 左侧底部 -->
      <div class="p-4 border-t border-neutral-medium/30">
        <div class="bg-primary/5 rounded-lg p-3">
          <div class="flex items-start space-x-3">
            <div class="bg-primary/20 p-2 rounded-full">
              <i class="fa fa-lightbulb-o text-primary"></i>
            </div>
            <div>
              <h4 class="text-sm font-medium">需要帮助？</h4>
              <p class="text-xs text-neutral mt-1">联系客服获取支持</p>
              <button class="text-primary text-xs mt-2 hover:underline">查看帮助中心</button>
            </div>
          </div>
        </div>
      </div>
    </aside>

    <!-- 右侧主内容 -->
    <section class="flex-1 flex flex-col overflow-hidden">
      <!-- 页面标题和日期 -->
      <div class="bg-white border-b border-neutral-medium/30 p-4 md:p-6">
        <div class="flex flex-col md:flex-row md:items-center md:justify-between">
          <div>
            <h2 class="text-[clamp(1.25rem,3vw,1.75rem)] font-bold">工作台</h2>
            <p class="text-neutral text-sm mt-1" id="current-date">2023年5月12日 星期五</p>
          </div>
          
          <div class="flex items-center space-x-3 mt-4 md:mt-0">
            <button class="flex items-center space-x-2 px-4 py-2 border border-neutral-medium/30 rounded-lg text-neutral hover:bg-neutral-light transition-colors">
              <i class="fa fa-calendar"></i>
              <span>本月</span>
              <i class="fa fa-angle-down ml-1"></i>
            </button>
            
            <button class="bg-primary hover:bg-primary/90 text-white px-4 py-2 rounded-lg transition-colors flex items-center space-x-2">
              <i class="fa fa-plus"></i>
              <span>新建案件</span>
            </button>
          </div>
        </div>
      </div>
      
      <!-- 快捷操作 -->
      <div class="p-4 md:p-6">
        <div class="grid grid-cols-2 md:grid-cols-4 gap-4">
          <button class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center text-center card-hover">
            <div class="w-12 h-12 rounded-full bg-primary/10 flex items-center justify-center text-primary mb-3">
              <i class="fa fa-plus text-xl"></i>
            </div>
            <h3 class="text-sm font-medium">新建案件</h3>
            <p class="text-xs text-neutral mt-1">创建新的争议案件</p>
          </button>
          
          <button class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center text-center card-hover">
            <div class="w-12 h-12 rounded-full bg-success/10 flex items-center justify-center text-success mb-3">
              <i class="fa fa-check text-xl"></i>
            </div>
            <h3 class="text-sm font-medium">处理案件</h3>
            <p class="text-xs text-neutral mt-1">处理待办案件</p>
          </button>
          
          <button class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center text-center card-hover">
            <div class="w-12 h-12 rounded-full bg-info/10 flex items-center justify-center text-info mb-3">
              <i class="fa fa-file-text-o text-xl"></i>
            </div>
            <h3 class="text-sm font-medium">生成报告</h3>
            <p class="text-xs text-neutral mt-1">导出处理结果</p>
          </button>
          
          <button class="bg-white rounded-xl p-4 shadow-sm flex flex-col items-center justify-center text-center card-hover">
            <div class="w-12 h-12 rounded-full bg-warning/10 flex items-center justify-center text-warning mb-3">
              <i class="fa fa-bell-o text-xl"></i>
            </div>
            <h3 class="text-sm font-medium">提醒设置</h3>
            <p class="text-xs text-neutral mt-1">设置通知提醒</p>
          </button>
        </div>
      </div>
      
      <!-- 数据概览和待办事项 -->
      <div class="flex-1 overflow-y-auto p-4 md:p-6 scrollbar-thin">
        <div class="grid grid-cols-1 lg:grid-cols-3 gap-6">
          <!-- 左侧：数据统计 -->
          <div class="lg:col-span-1 space-y-6">
            <!-- 案件统计卡片 -->
            <div class="bg-white rounded-xl p-5 shadow-sm">
              <h3 class="text-lg font-semibold mb-4">案件统计</h3>
              
              <div class="space-y-5">
                <div>
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">待处理案件</span>
                    <span class="text-sm font-medium">12</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-value bg-danger" style="width: 25%"></div>
                  </div>
                </div>
                
                <div>
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">处理中案件</span>
                    <span class="text-sm font-medium">28</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-value bg-warning" style="width: 60%"></div>
                  </div>
                </div>
                
                <div>
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">已解决案件</span>
                    <span class="text-sm font-medium">156</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-value bg-success" style="width: 85%"></div>
                  </div>
                </div>
                
                <div>
                  <div class="flex justify-between items-center mb-1">
                    <span class="text-sm">本月新增案件</span>
                    <span class="text-sm font-medium">42</span>
                  </div>
                  <div class="progress-bar">
                    <div class="progress-value bg-primary" style="width: 55%"></div>
                  </div>
                </div>
              </div>
              
              <button class="w-full mt-5 py-2 text-primary text-sm border border-primary/30 rounded-lg hover:bg-primary/5 transition-colors">
                查看详细统计
              </button>
            </div>
            
            <!-- 案件类型分布 -->
            <div class="bg-white rounded-xl p-5 shadow-sm">
              <h3 class="text-lg font-semibold mb-4">案件类型分布</h3>
              <div class="h-64">
                <canvas id="caseTypeChart"></canvas>
              </div>
            </div>
          </div>
          
          <!-- 右侧：待办事项和最近活动 -->
          <div class="lg:col-span-2 space-y-6">
            <!-- 待办事项 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
                <h3 class="text-lg font-semibold">待办事项</h3>
                <button class="text-primary text-sm hover:underline">查看全部</button>
              </div>
              
              <div class="divide-y divide-neutral-medium/30">
                <!-- 待办1 -->
                <div class="p-4 hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-start">
                    <div class="mr-4 mt-0.5">
                      <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary">
                    </div>
                    <div class="flex-1">
                      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <h4 class="text-sm font-medium">CASE-20230512-001 案件审核</h4>
                        <span class="text-xs text-danger mt-1 md:mt-0">今日 18:00 截止</span>
                      </div>
                      <p class="text-xs text-neutral mt-1">审核李小明提交的服务质量争议案件材料</p>
                      <div class="flex items-center mt-3 space-x-2">
                        <span class="px-2 py-0.5 bg-danger/10 text-danger text-xs rounded-full">高优先级</span>
                        <button class="text-primary text-xs hover:underline ml-auto">处理</button>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 待办2 -->
                <div class="p-4 hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-start">
                    <div class="mr-4 mt-0.5">
                      <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary">
                    </div>
                    <div class="flex-1">
                      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <h4 class="text-sm font-medium">CASE-20230511-087 证据补充</h4>
                        <span class="text-xs text-warning mt-1 md:mt-0">明日 12:00 截止</span>
                      </div>
                      <p class="text-xs text-neutral mt-1">联系王建国补充合同纠纷案件的相关证据</p>
                      <div class="flex items-center mt-3 space-x-2">
                        <span class="px-2 py-0.5 bg-warning/10 text-warning text-xs rounded-full">中优先级</span>
                        <button class="text-primary text-xs hover:underline ml-auto">处理</button>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 待办3 -->
                <div class="p-4 hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-start">
                    <div class="mr-4 mt-0.5">
                      <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary">
                    </div>
                    <div class="flex-1">
                      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <h4 class="text-sm font-medium">争议处理团队周会</h4>
                        <span class="text-xs text-neutral mt-1 md:mt-0">周五 10:00</span>
                      </div>
                      <p class="text-xs text-neutral mt-1">参加每周争议处理进度评审会议</p>
                      <div class="flex items-center mt-3 space-x-2">
                        <span class="px-2 py-0.5 bg-info/10 text-info text-xs rounded-full">会议</span>
                        <button class="text-primary text-xs hover:underline ml-auto">查看详情</button>
                      </div>
                    </div>
                  </div>
                </div>
                
                <!-- 待办4 -->
                <div class="p-4 hover:bg-neutral-light/50 transition-bg">
                  <div class="flex items-start">
                    <div class="mr-4 mt-0.5">
                      <input type="checkbox" class="rounded border-neutral-medium/50 text-primary focus:ring-primary">
                    </div>
                    <div class="flex-1">
                      <div class="flex flex-col md:flex-row md:items-center md:justify-between">
                        <h4 class="text-sm font-medium">5月处理报告提交</h4>
                        <span class="text-xs text-neutral mt-1 md:mt-0">5月31日截止</span>
                      </div>
                      <p class="text-xs text-neutral mt-1">提交5月份争议案件处理情况报告</p>
                      <div class="flex items-center mt-3 space-x-2">
                        <span class="px-2 py-0.5 bg-neutral/10 text-neutral text-xs rounded-full">低优先级</span>
                        <button class="text-primary text-xs hover:underline ml-auto">处理</button>
                      </div>
                    </div>
                  </div>
                </div>
              </div>
            </div>
            
            <!-- 最近活动 -->
            <div class="bg-white rounded-xl shadow-sm overflow-hidden">
              <div class="p-5 border-b border-neutral-medium/30 flex justify-between items-center">
                <h3 class="text-lg font-semibold">最近活动</h3>
                <button class="text-primary text-sm hover:underline">查看全部</button>
              </div>
              
              <div class="p-5">
                <div class="relative">
                  <!-- 时间线 -->
                  <div class="absolute left-3 top-0 bottom-0 w-0.5 bg-neutral-medium/30"></div>
                  
                  <!-- 活动1 -->
                  <div class="relative pl-10 pb-6 last:pb-0">
                    <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-success flex items-center justify-center">
                      <i class="fa fa-check text-white text-xs"></i>
                    </div>
                    <div>
                      <p class="text-sm">
                        <span class="font-medium">CASE-20230510-076</span> 案件已解决
                      </p>
                      <p class="text-xs text-neutral mt-1">您已完成产品质量争议案件的处理</p>
                      <p class="text-xs text-neutral mt-2">今天 14:30</p>
                    </div>
                  </div>
                  
                  <!-- 活动2 -->
                  <div class="relative pl-10 pb-6 last:pb-0">
                    <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-primary flex items-center justify-center">
                      <i class="fa fa-user text-white text-xs"></i>
                    </div>
                    <div>
                      <p class="text-sm">
                        <span class="font-medium">李娜</span> 分配了新案件给您
                      </p>
                      <p class="text-xs text-neutral mt-1">CASE-20230512-001 服务质量争议</p>
                      <p class="text-xs text-neutral mt-2">今天 10:15</p>
                    </div>
                  </div>
                  
                  <!-- 活动3 -->
                  <div class="relative pl-10 pb-6 last:pb-0">
                    <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-warning flex items-center justify-center">
                      <i class="fa fa-comment-o text-white text-xs"></i>
                    </div>
                    <div>
                      <p class="text-sm">
                        <span class="font-medium">王建国</span> 发送了新消息
                      </p>
                      <p class="text-xs text-neutral mt-1">关于CASE-20230511-087案件的补充说明</p>
                      <p class="text-xs text-neutral mt-2">昨天 16:42</p>
                    </div>
                  </div>
                  
                  <!-- 活动4 -->
                  <div class="relative pl-10">
                    <div class="absolute left-0 top-1 w-6 h-6 rounded-full bg-danger flex items-center justify-center">
                      <i class="fa fa-exclamation text-white text-xs"></i>
                    </div>
                    <div>
                      <p class="text-sm">
                        <span class="font-medium">系统提醒</span> 有3个案件即将逾期
                      </p>
                      <p class="text-xs text-neutral mt-1">请尽快处理CASE-20230509-065等案件</p>
                      <p class="text-xs text-neutral mt-2">昨天 09:30</p>
                    </div>
                  </div>
                </div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </section>
  </main>

  <!-- JavaScript -->
  <script>
    // 设置当前日期
    document.addEventListener('DOMContentLoaded', function() {
      const dateElement = document.getElementById('current-date');
      const now = new Date();
      const options = { year: 'numeric', month: 'long', day: 'numeric', weekday: 'long' };
      dateElement.textContent = now.toLocaleDateString('zh-CN', options);
      
      // 初始化案件类型分布图表
      const ctx = document.getElementById('caseTypeChart').getContext('2d');
      new Chart(ctx, {
        type: 'doughnut',
        data: {
          labels: ['服务质量争议', '合同纠纷', '产品质量争议', '退款争议', '其他'],
          datasets: [{
            data: [35, 25, 20, 15, 5],
            backgroundColor: [
              '#3B82F6', // 蓝色 - 服务质量争议
              '#10B981', // 绿色 - 合同纠纷
              '#F59E0B', // 黄色 - 产品质量争议
              '#EF4444', // 红色 - 退款争议
              '#6B7280'  // 灰色 - 其他
            ],
            borderWidth: 0,
            hoverOffset: 4
          }]
        },
        options: {
          responsive: true,
          maintainAspectRatio: false,
          plugins: {
            legend: {
              position: 'bottom',
              labels: {
                boxWidth: 12,
                padding: 15,
                font: {
                  size: 11
                }
              }
            }
          },
          cutout: '70%'
        }
      });
      
      // 待办事项复选框交互
      const checkboxes = document.querySelectorAll('input[type="checkbox"]');
      checkboxes.forEach(checkbox => {
        checkbox.addEventListener('change', function() {
          const todoItem = this.closest('div[class*="p-4"]');
          const title = todoItem.querySelector('h4');
          
          if (this.checked) {
            title.classList.add('line-through', 'text-neutral');
            todoItem.classList.add('opacity-70');
          } else {
            title.classList.remove('line-through', 'text-neutral');
            todoItem.classList.remove('opacity-70');
          }
        });
      });
      
      // 快捷操作按钮点击事件
      const quickActionButtons = document.querySelectorAll('.grid button');
      quickActionButtons.forEach(button => {
        button.addEventListener('click', function() {
          const actionName = this.querySelector('h3').textContent;
          alert(`执行操作: ${actionName}\n在实际应用中，这里会打开相应的操作页面`);
        });
      });
      
      // 处理按钮点击事件
      const processButtons = document.querySelectorAll('button:text-primary');
      processButtons.forEach(button => {
        button.addEventListener('click', function() {
          const actionText = this.textContent.trim();
          const itemText = this.closest('div[class*="p-4"]').querySelector('h4').textContent;
          alert(` ${actionText}: ${itemText}\n在实际应用中，这里会打开处理页面`);
        });
      });
    });
  </script>
</body>
</html>
